<template>
	<view class="container">
		<cus-navbar navbar :title="$t('index132')"></cus-navbar>
		<view class="tree_daohang">
			<scroll-view class="scroll-view_H" scroll-x="true" :scroll-left="scroll_left" :scroll-with-animation="true">
				<view class="list scroll-view-item_H" v-for="(item,index) in add_list" :key="index" @click="tab_index(item,index)">
					<text class="text" v-if="index!=0"> > </text> 
					<text class="dizhi">{{item.address_hide}}</text>
				</view>
			</scroll-view>
		</view>
		<view class="" style="height: 90rpx;"></view>
		<view class="jiedian_list">
			<view class="list" v-for="(item,index) in list" :key="index" @click="get_id(item)">
				<image src="/static/pg-tree/icon/arrow-right.png" mode="" style="width:48rpx;height: 48rpx;" v-if="item.subCount!=0"></image>
				<view class="" style="width: 48rpx;height: 48rpx;" v-else></view>
				<view class="">{{item.address_hide}} {{$t('index133')}}:{{item.layer_a}}  {{$t('index134')}}:{{item.layer_b}} {{$t('index135')}}:{{item.team}}</view>
			</view>
		</view>
		<!-- <tree-item v-for="(item,index) in list" :key="index" :item="item" @switchFold = "switchFold"></tree-item> -->
		<cus-empty v-show="list.length==0"></cus-empty>
		<uni-load-more v-if="list.length==0" status="noMore"></uni-load-more>
	</view>
</template>

<script>
	import TreeItem from '@/components/TreeItem/TreeItem.vue';

	export default {
		name: 'TreeList',
		components: {
			TreeItem
		},
		data() {
			return {
				list: [],
				from: '',
				page: 1,
				address: '',
				add_list:[],
				scroll_left:0,
			};

		},
		onLoad() {
			this.loadData(true)
			let address = this.$store.state.user.address
			let data = {}
			if (address) {
				this.address = address.slice(0, 6) + '****' + address.slice(address.length - 4)
			}
			data.address_hide = this.address
			data.id = 0
			this.add_list.push(data)
		},
		methods: {
			tab_index(e,d){
				this.add_list = this.add_list.slice(0, d)
				this.scroll_left = 50*d
				console.log(this.scroll_left)
				this.get_id(e)
				this.$forceUpdate()
			},
			loadData(flag, refresh) {
				if (flag) this.page = 1
				this.loadStatus = 'loading'
				this.$api.post('/data/api.auth.invest/note', {
					from: this.from,
				}).then(res => {
					console.log(res)
					this.list = res.list
				})
			},
			get_id(e) {
				this.add_list.push(e)
				this.scroll_left = 50*this.add_list.length
				console.log(this.scroll_left)
				this.$api.post('/data/api.auth.invest/note', {
					from: e.id,
				}).then(res => {
					console.log(res)
					this.list = res.list
				})
			}
		}
	}
</script>
<style lang="scss">
	.tree_daohang {
		display: flex;
		align-items: center;
		height: 80rpx;
		background: rgb(29, 30, 37);
		margin-top: 10rpx;
		padding-left: 10rpx;padding-right: 20rpx;box-sizing: border-box;position: fixed;top: 184rpx;left: 0;width: 100%;z-index: 111;
		.list {
			padding-left: 10rpx;
		}
	}
	.jiedian_list{
		.list{display: flex;align-items: center;background: linear-gradient(180deg, #061915 0%, #0D283A 100%);height: 100rpx;}
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;height: 90rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		text-align: center;height: 90rpx;line-height: 90rpx;
		.text{margin-right: 10rpx;}
		.dizhi{width: 220rpx;}
	}
</style>